import { Col, Row } from 'antd';
import cs from 'classnames';

import { Icon } from '@iconify/react';

import styles from './index.module.scss';

const Page: React.FC = () => {
  return (
    <div className={styles['layout']}>
      <Row gutter={[24, 24]}>
        <Col md={5}>
          <div className={cs(styles['card'], styles['card-1'])}>
            <div className={styles['card-header']}>
              <div className={styles['card-title']}>今日预警数量</div>
              <div className={styles['card-icon']}>
                <Icon icon="ri:alarm-warning-fill" />
              </div>
            </div>
          </div>
        </Col>
        <Col md={5}>
          <div className={cs(styles['card'], styles['card-2'])}>待处理告警数量</div>
        </Col>
        <Col md={5}>
          <div className={cs(styles['card'], styles['card-3'])}>未读消息</div>
        </Col>
        <Col md={9}>
          <div className={cs(styles['card'], styles['card-4'])}>未读消息</div>
        </Col>
      </Row>
    </div>
  );
};

export default Page;
